const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
// css和js构建的文件名增加contenthash,修改js或者css后重新打包查看hash值的变化
module.exports = {
	entry: './src/js/index.js',
	output: {
		filename: 'js/build.[name].[contenthash:10].js',
		path: resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.(sa|sc|c|le)ss$/,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader',
					'less-loader',
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								ident:'postcss',
								plugins: [require('postcss-preset-env')()]
							}
						}
					}
				],
			},
			{
				test: /\.js$/,
				loader: 'eslint-loader',
				exclude: /node_modules/,
				options: {
					fix: true,
				},
			},
			{
				test: /\.(png|gif|jpg|jpeg)$/,
				use: [
					{
						loader: "url-loader",
						options: {
							limit: 8 * 1024,
							name: '[name].[hash:10].[ext]',
							esModule: false,
							outputPath: 'img'
						}
					}
				],
				type: 'javascript/auto'
			},
			{
				test: /\.html$/,
				loader: 'html-loader',
			},
			{
				exclude: /\.(css|js|html|jsx|ts|less|scss|json|png|jpg|svg)/,
				loader: 'file-loader',
				options: {
					name: '[hash:10].[ext]',
					outputPath: 'media'
				},
			},
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
			minify: {
				collapseWhitespace: true,
				removeComments:true,
			}
		}),
		new MiniCssExtractPlugin({
			filename: 'css/[name].[contenthash:10].css'
		}),
		new OptimizeCSSAssetsPlugin({}),
	],
	mode: 'development',
	devServer: {
		contentBase: resolve(__dirname, 'build'),
		compress: true,
		port: 3000,
		open: true,
	},
	// 提供源代码和构建代码的映射
	devtool: 'source-map',
}